<template>
  <!-- blur  change  input 
  input:监听文本框内容的变化，只要内容变化就会自动触发input事件-->
  <input type="text"
         class="hminput"
         @input='handlerinput'
         :class="{success:flag,error:!flag}"
         @blur='handlerchange'>
</template>

<script>
// import { Toast } from 'vant';
export default {
  // props: ['value']
  props: {
    rules: {
      // RegExp:正则表达式的类型
      type: RegExp
    },
    msg: {
      type: String,
      default: '用户输入数据不合法'
    }
  },
  data () {
    return {
      flag: true,
    }
  },
  methods: {
    handlerinput (e) {
      let v = e.target.value
      // 根据用户传递的规则进行数据验证
      if (this.rules) { // 说明传递了验证规则
        // 进行验证
        // test是正则的验证方法，返回bool值
        if (this.rules.test(v)) {
          this.flag = true
        } else {
          this.flag = false
        }
      }
      this.$emit('input', v)
    },
    // 处理用户失焦事件，在失焦之后，验证用户数据，给出相应的提示
    handlerchange (e) {
      if (this.rules) { // 说明传递了验证规则
        // 进行验证
        // test是正则的验证方法，返回bool值
        if (!this.rules.test(e.target.value)) {
          this.$toast.fail({
            message: this.msg, // 消息文本内容
            duration: 3000, // 提示框显示的时长
            position: 'top' // 提示框显示的位置
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.hminput {
  width: 318 * 100vw/360;
  height: 50px;
  outline: none;
  border: none;
  border-bottom: 3px solid #ccc;
  font-size: 20px;
  line-height: 50px;
}
.success {
  border-bottom-color: green;
  color: green;
}
.error {
  border-bottom-color: red;
  color: red;
}
</style>